<template>
  <div class="admin-sidebar">
    <div class="sidebar-header">
      <h2>管理控制台</h2>
    </div>
    <el-menu
      :default-active="activeMenu"
      class="admin-menu"
      router
      @select="handleMenuSelect"
    >
      <el-menu-item index="/admin/dashboard">
        <el-icon><DataLine /></el-icon>
        <span>数据概览</span>
      </el-menu-item>
      <el-sub-menu index="user">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/admin/users">用户列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="course">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>课程管理</span>
        </template>
        <el-menu-item index="/admin/course-types">课程类型</el-menu-item>
        <el-menu-item index="/admin/courses">课程列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="order">
        <template #title>
          <el-icon><ShoppingCart /></el-icon>
          <span>订单管理</span>
        </template>
        <el-menu-item index="/admin/orders">订单列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="employee" v-if="isSuperAdmin">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span>员工管理</span>
        </template>
        <el-menu-item index="/admin/employees">员工列表</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { DataLine, User, Document, ShoppingCart, UserFilled } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 计算当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 判断是否为超级管理员
const isSuperAdmin = true;
// const isSuperAdmin = computed(() => {
//   const adminInfo = localStorage.getItem('adminInfo')
//   if (adminInfo) {
//     return JSON.parse(adminInfo).isSuperAdmin
//   }
//   // 开发环境默认返回true，显示所有菜单
//   return true
// })

// 处理菜单选择
const handleMenuSelect = (key) => {
  console.log('选择菜单:', key)
}

// 暴露属性给父组件
defineExpose({
  activeMenu,
  isSuperAdmin
})
</script>

<style scoped>
.admin-sidebar {
  width: 240px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
}

.sidebar-header h2 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.admin-menu {
  flex: 1;
  border-right: none;
}

.admin-menu .el-menu-item, .admin-menu .el-sub-menu__title {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}

.admin-menu .el-menu-item.is-active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.admin-menu .el-menu-item:hover {
  background-color: #f5f7fa;
}




/* 响应式设计 */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 200px;
  }
  
  .sidebar-header h2 {
    font-size: 16px;
  }
}

/* 折叠状态 */
.admin-sidebar.collapsed {
  width: 64px;
}

.admin-sidebar.collapsed .sidebar-header h2,
.admin-sidebar.collapsed .el-menu-item span,
.admin-sidebar.collapsed .el-sub-menu__title span {
  display: none;
}

.admin-sidebar.collapsed .admin-menu .el-menu-item,
.admin-sidebar.collapsed .admin-menu .el-sub-menu__title {
  justify-content: center;
}
</style>